<template>
<el-container>
  <el-header>
    <el-row>
      <el-col id="page1Tag" :span="8" @click="$router.push('/')"><span>处理表单</span></el-col>
      <el-col id="page2Tag" :span="8" @click="$router.push('/2')"><span>表单预览</span></el-col>
      <el-col id="page3Tag" :span="8" @click="$router.push('/3')"><span>查看流程</span></el-col>
    </el-row>
    <div style="
      content: ' ';
      position: relative;
      left: 0;
      top: 0;
      height: 0;
      width: 100%;
      border-top: 1px solid #bcbab6;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
      "></div>
  </el-header>
  <el-main>
    <div style="
      position: relative;
      top: 53px;
      background-color: #ffffff;
      margin-bottom: 100px;
      width: 100vw;

      box-shadow: rgb(190 190 190) 0px 0px 1px 1px, rgb(210 210 210) 0px 0px 20px 0px;
      ">
      <img src="../public/p2CMU.png" style="
        display: block;
        padding-left: 5px;
        width: calc(min(100vw , 100vh) / 620 * 230);
        right: auto;
        padding-top: calc(min(100vw , 100vh) / 620 * 36);
        padding-bottom: calc(min(100vw , 100vh) / 620 * 32);
        "/>
        <span style="
          display: block;
          padding-bottom: calc(min(100vw , 100vh) / 620 * 30);
          font-size: calc(min(100vw , 100vh) / 620 * 33);
          font-weight: 400;
          ">中国医科大学学生出入校审批表</span>
        <table style="font-size: calc(min(100vw , 100vh) / 620 * 14);border-spacing: 0px;"><tr>
          <td style="width: 50vw; padding-left:calc(min(100vw , 100vh) / 620 * 32);text-align: left; padding-bottom: calc(min(100vw , 100vh) / 620 * 7);">学生类型：研究生</td>
          <td style="width: 50vw; padding-left:calc(min(100vw , 100vh) / 620 * 32);text-align: left;">填表日期：{{signFormTime}}</td></tr></table>
        <div style="width:100vw; padding-left:3px; padding-right:3px;">
        <table id="p2MainTable" style="width: calc(100vw - 6px);font-size:calc(min(100vw , 100vh) / 620 * 14);">
          <tr>
            <td colspan="4"><span style="display: block; padding-top: calc(min(100vw , 100vh) / 620 * 1); padding-bottom: 0;">出入校登记信息（出入校</span><span style="display: block;position: relative; padding-top: 0; padding-bottom: calc(min(100vw , 100vh) / 620 * 1);">号）</span></td>
          </tr>
          <tr>
            <td class="p2MainTableKey">姓名</td>
            <td class="p2MainTableValue">{{username}}</td>
            <td class="p2MainTableKey">本人电话</td>
            <td class="p2MainTableValue">{{phone}}</td>
          </tr>
          <tr>
            <td class="p2MainTableKey">学号</td>
            <td class="p2MainTableValue">{{xuehao}}</td>
            <td class="p2MainTableKey">性别</td>
            <td class="p2MainTableValue">{{sex}}</td>
          </tr>
          <tr>
            <td class="p2MainTableKey">学院</td>
            <td class="p2MainTableValue">公共卫生学院</td>
            <td class="p2MainTableKey">专业</td>
            <td class="p2MainTableValue">公共卫生</td>
          </tr>
          <tr>
            <td class="p2MainTableKey">宿舍及门牌号</td>
            <td class="p2MainTableValue">{{domitory}}</td>
            <td class="p2MainTableKey">辅导员姓名</td>
            <td class="p2MainTableValue">王宇晗</td>
          </tr>
          <tr>
            <td class="p2MainTableKey" style="padding: calc(min(100vw , 100vh) / 620 * 15);">出入校原因</td>
            <td class="p2MainTableValue up" colspan="3">{{reason}}</td>
          </tr>
          <tr>
            <td class="p2MainTableKey" style="padding: calc(min(100vw , 100vh) / 620 * 11);">出发地</td>
            <td class="p2MainTableValue up" colspan="3">医大沈北校区</td>
          </tr>
          <tr>
            <td class="p2MainTableKey" style="padding: calc(min(100vw , 100vh) / 620 * 15);">目的地及接触人员</td>
            <td class="p2MainTableValue up" colspan="3">沈阳航空航天大学附近</td>
          </tr>
          <tr>
            <td class="p2MainTableKey" style="padding: calc(min(100vw , 100vh) / 620 * 24);">出行方式及路线</td>
            <td class="p2MainTableValue up" colspan="3">197公交车</td>
          </tr>
          <tr>
            <td class="p2MainTableKey" style="padding: calc(min(100vw , 100vh) / 620 * 5);">离校日期及时间</td>
            <td class="p2MainTableValue">{{leaveTime}}</td>
            <td class="p2MainTableKey">返校日期及时间</td>
            <td class="p2MainTableValue">{{backTime}}</td>
          </tr>
        </table>
        </div>
        <div style="
          height:80px;
          "></div>
    </div>
  </el-main>
</el-container>
</template>

<style scoped>
.up{
  vertical-align: top;
}
.p2MainTableKey{
  text-align: center;
  padding: calc(min(100vw , 100vh) / 620 * 5);

}
.p2MainTableValue{
  text-align: left;
}
#p2MainTable td{
  border-right: 0.1mm solid black;
  border-bottom: 0.1mm solid black;
  margin-bottom: -0.1mm;
}
#p2MainTable{
  border-spacing: 0;
  margin-right: 3px;
  border-top: 0.4mm solid black;
  border-left: 0.4mm solid black;
  border-bottom: 0.3mm solid black;
  border-right: 0.3mm solid black;
}
#page2Tag {
  color: rgb(66, 170, 222);
  border-bottom: 3px solid #2FA1DB;
}
.el-header{
  position:fixed;
  width: 100%;
  background-color: #ffffff;
  color: #888;
  text-align: center;
  height: 53px!important;
  line-height: 48px;
  padding: 0px!important;
  font-size: 0.398cm;
  z-index: 1;
}
</style>

<script>
import { mapMutations } from "vuex";
import moment from 'moment'

export default({
  setup() {
    document.title= "表单预览";
  },
  data(){
    return{
      username: "",
      sex: this.$store.state.sex,
      signFormTime: this.$store.state.signFormTime,
      leaveTime: this.$store.state.leaveTime,
      backTime: this.$store.state.backTime,
      xuehao: this.$store.state.xuehao,
      domitory: this.$store.state.domitory,
      phone: this.$store.state.phone,
      reason: this.$store.state.reason,
    };
  },
  methods:{
  ...mapMutations(["setMessage"]),
  },
  created(){
    if (moment(Date()).format("MMDD")!=this.$store.state.initialTime){
      this.setInitialTime(moment(Date()).format("MMDD"));
      this.signFormTimeLong= this.$store.state.signFormTimeLong;
      this.signFormTime= this.$store.state.signFormTime;
      this.replyTime= this.$store.state.replyTime;
      this.leaveTime= this.$store.state.leaveTime;
      this.backTime= this.$store.state.backTime;
    }
    if (this.$store.state.username!=""){
      this.username= this.$store.state.username;
      this.sex= this.$store.state.sex;
    } else {
      this.$router.push("/0");
    }
    if (this.reason==="") {
      this.setMessage("设置好信息后再次出现此页面是因为该页面已被更新")
      this.$router.push("/0");
    }
  }
})
</script>
